<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社区文章活跃度分析</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .filter-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
    .chart-item {
      flex: 1;
      min-width: 300px;
      height: 350px;
    }
    .chart-item-full {
      flex: 100%;
      height: 400px;
    }
    .data-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
    .stat-total::before {
      background-color: #3B82F6;
    }
    .stat-publish::before {
      background-color: #10B981;
    }
    .stat-comment::before {
      background-color: #F59E0B;
    }
    .stat-view::before {
      background-color: #8B5CF6;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
      line-height: 1.2;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 22px;
      margin-bottom: 5px;
    }
    .stat-change {
      font-size: 12px;
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
    }
    .change-up {
      color: #EF4444;
    }
    .change-down {
      color: #10B981;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .time-range-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    .time-range-btn {
      padding: 5px 12px;
      background-color: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
    }
    .time-range-btn.active {
      background-color: #3B82F6;
      color: #FFFFFF;
      border-color: #3B82F6;
    }
    .time-range-btn:hover:not(.active) {
      background-color: #F1F5F9;
    }
    .table-container {
      padding: 0 20px 20px;
    }
    .layui-table {
      margin: 0;
      border-radius: 6px;
    }
    .layui-table th {
      font-weight: 500;
      background-color: #F8FAFC;
    }
    .layui-table tr:hover {
      background-color: #F8FAFC;
    }
    .article-title {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <!-- 核心数据统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-file-text-o"></i> 文章核心数据概览</h3>
      <div>
        <button class="layui-btn layui-btn-primary" id="refreshDataBtn">
          <i class="fa fa-refresh"></i> 刷新数据
        </button>
        <button class="layui-btn layui-btn-primary" id="exportDataBtn">
          <i class="fa fa-download"></i> 导出报表
        </button>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="data-stats">
        <div class="stat-item stat-total">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-file-text"></i></div>
          <div class="stat-value">5,842</div>
          <div class="stat-label">总文章数</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 6.8%
          </div>
        </div>
        <div class="stat-item stat-publish">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-pencil"></i></div>
          <div class="stat-value">356</div>
          <div class="stat-label">本月发布</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 9.2%
          </div>
        </div>
        <div class="stat-item stat-comment">
          <div class="stat-icon" style="color: #F59E0B;"><i class="fa fa-comments"></i></div>
          <div class="stat-value">12,847</div>
          <div class="stat-label">总评论数</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 12.5%
          </div>
        </div>
        <div class="stat-item stat-view">
          <div class="stat-icon" style="color: #8B5CF6;"><i class="fa fa-eye"></i></div>
          <div class="stat-value">1,285,643</div>
          <div class="stat-label">总浏览量</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 15.3%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 文章活跃度趋势分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-line-chart"></i> 文章活跃度趋势分析</h3>
    </div>
    <div class="filter-bar">
      <div class="time-range-btns" id="activityTimeRange">
        <div class="time-range-btn active" data-range="week">近7天</div>
        <div class="time-range-btn" data-range="month">近30天</div>
        <div class="time-range-btn" data-range="quarter">近90天</div>
        <div class="time-range-btn" data-range="year">近1年</div>
      </div>
      <div class="layui-form">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline" style="width: 220px;">
              <input type="text" name="activityTimeRangeCustom" placeholder="请选择时间范围" autocomplete="off" class="layui-input" id="activityTimeRangeCustom">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">文章分类</label>
            <div class="layui-input-inline">
              <select name="articleCategory" id="articleCategory">
                <option value="all">全部分类</option>
                <option value="technology">技术研究</option>
                <option value="academic">学术论文</option>
                <option value="conference">会议资讯</option>
                <option value="experience">经验分享</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="activityFilterBtn"><i class="fa fa-filter"></i> 筛选</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item-full" id="articleActivityChart"></div>
      </div>
    </div>
  </div>

  <!-- 文章分类与互动分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-pie-chart"></i> 文章分类与互动分析</h3>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item" id="articleCategoryChart"></div>
        <div class="chart-item" id="articleInteractionChart"></div>
      </div>
    </div>
  </div>

  <!-- 热门文章排行 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-bar-chart"></i> 热门文章排行</h3>
      <div>
        <select name="rankingType" id="rankingType" lay-filter="rankingType" class="layui-select" style="width: 150px;">
          <option value="views">按浏览量</option>
          <option value="comments">按评论数</option>
          <option value="likes">按点赞数</option>
        </select>
      </div>
    </div>
    <div class="table-container">
      <table class="layui-table" lay-size="sm">
        <thead>
          <tr>
            <th style="width: 60px;">排名</th>
            <th>文章标题</th>
            <th>作者</th>
            <th>发布时间</th>
            <th>浏览量</th>
            <th>评论数</th>
            <th>点赞数</th>
            <th>分类</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #F59E0B; color: white; border-radius: 50%; text-align: center;">1</span></td>
            <td>
              <div class="article-title" title="深度学习在图像识别中的最新进展与应用">深度学习在图像识别中的最新进展与应用</div>
            </td>
            <td>zhangwei</td>
            <td>2023-09-10</td>
            <td>28,542</td>
            <td>356</td>
            <td>1,287</td>
            <td>技术研究</td>
          </tr>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #94A3B8; color: white; border-radius: 50%; text-align: center;">2</span></td>
            <td>
              <div class="article-title" title="2023年度人工智能领域顶级学术会议汇总">2023年度人工智能领域顶级学术会议汇总</div>
            </td>
            <td>liming</td>
            <td>2023-09-05</td>
            <td>24,156</td>
            <td>428</td>
            <td>986</td>
            <td>会议资讯</td>
          </tr>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #D97706; color: white; border-radius: 50%; text-align: center;">3</span></td>
            <td>
              <div class="article-title" title="研究生学术论文写作全攻略：从选题到发表">研究生学术论文写作全攻略：从选题到发表</div>
            </td>
            <td>wanghong</td>
            <td>2023-08-28</td>
            <td>21,876</td>
            <td>542</td>
            <td>1,563</td>
            <td>经验分享</td>
          </tr>
          <tr>
            <td>4</td>
            <td>
              <div class="article-title" title="大数据分析在科研项目评估中的创新应用">大数据分析在科研项目评估中的创新应用</div>
            </td>
            <td>zhaoli</td>
            <td>2023-09-12</td>
            <td>18,542</td>
            <td>287</td>
            <td>756</td>
            <td>学术论文</td>
          </tr>
          <tr>
            <td>5</td>
            <td>
              <div class="article-title" title="科研项目申报书撰写技巧与常见问题解析">科研项目申报书撰写技巧与常见问题解析</div>
            </td>
            <td>sunjie</td>
            <td>2023-09-01</td>
            <td>16,987</td>
            <td>325</td>
            <td>842</td>
            <td>经验分享</td>
          </tr>
          <tr>
            <td>6</td>
            <td>
              <div class="article-title" title="基于机器学习的科研文献自动分类系统设计">基于机器学习的科研文献自动分类系统设计</div>
            </td>
            <td>chenqi</td>
            <td>2023-08-25</td>
            <td>15,632</td>
            <td>218</td>
            <td>632</td>
            <td>技术研究</td>
          </tr>
          <tr>
            <td>7</td>
            <td>
              <div class="article-title" title="计算机科学领域SCI期刊影响因子及投稿指南">计算机科学领域SCI期刊影响因子及投稿指南</div>
            </td>
            <td>zhoulei</td>
            <td>2023-08-20</td>
            <td>14,258</td>
            <td>412</td>
            <td>953</td>
            <td>学术论文</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">8</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 56 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研社区管理系统 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期选择器
      laydate.render({
        elem: '#activityTimeRangeCustom',
        range: true,
        theme: 'molv'
      });
      
      // 时间范围按钮点击事件
      document.querySelectorAll('#activityTimeRange .time-range-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有按钮的active类
          document.querySelectorAll('#activityTimeRange .time-range-btn').forEach(b => {
            b.classList.remove('active');
          });
          // 给当前点击的按钮添加active类
          this.classList.add('active');
          
          // 刷新图表数据
          updateActivityChart(this.getAttribute('data-range'));
        });
      });
      
      // 筛选按钮点击事件
      form.on('submit(activityFilterBtn)', function(data) {
        layer.msg('筛选条件已应用', {icon: 0, time: 1000});
        // 这里可以根据筛选条件更新图表
        return false;
      });
      
      // 排行榜类型切换
      form.on('select(rankingType)', function(data) {
        const typeText = data.value === 'views' ? '浏览量' : 
                         (data.value === 'comments' ? '评论数' : '点赞数');
        layer.msg(`已按${typeText}排序`, {icon: 0, time: 1000});
        // 这里可以根据选择的类型重新排序表格数据
      });
      
      // 刷新数据按钮
      document.getElementById('refreshDataBtn').addEventListener('click', function() {
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('数据已刷新', {icon: 1, time: 1000});
        }, 1000);
      });
      
      // 导出数据按钮
      document.getElementById('exportDataBtn').addEventListener('click', function() {
        layer.confirm('确定要导出文章活跃度分析数据报表吗？', {
          btn: ['导出Excel', '导出PDF', '取消']
        }, function(index) {
          layer.close(index);
          layer.load();
          
          setTimeout(function() {
            layer.closeAll('loading');
            layer.msg('Excel报表导出成功', {icon: 1, time: 1500});
          }, 1500);
        }, function(index) {
          layer.close(index);
          layer.load();
          
          setTimeout(function() {
            layer.closeAll('loading');
            layer.msg('PDF报表导出成功', {icon: 1, time: 1500});
          }, 1500);
        });
      });
      
      // 初始化文章活跃度趋势图表
      function initActivityChart() {
        const chartDom = document.getElementById('articleActivityChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '文章活跃度趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['发布文章数', '浏览量', '评论数', '点赞数'],
            top: 30
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18']
          },
          yAxis: [
            {
              type: 'value',
              name: '数量',
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '浏览量',
              position: 'right',
              splitLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '发布文章数',
              type: 'line',
              data: [18, 24, 21, 32, 26, 19, 23],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#3B82F6'
              },
              itemStyle: {
                color: '#3B82F6'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(59, 130, 246, 0.3)'},
                  {offset: 1, color: 'rgba(59, 130, 246, 0)'}
                ])
              }
            },
            {
              name: '浏览量',
              type: 'line',
              data: [52643, 68954, 72354, 65421, 58963, 61254, 75632],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#10B981'
              },
              itemStyle: {
                color: '#10B981'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(16, 185, 129, 0.3)'},
                  {offset: 1, color: 'rgba(16, 185, 129, 0)'}
                ])
              },
              yAxisIndex: 1
            },
            {
              name: '评论数',
              type: 'line',
              data: [456, 521, 489, 567, 498, 523, 487],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#F59E0B'
              },
              itemStyle: {
                color: '#F59E0B'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(245, 158, 11, 0.3)'},
                  {offset: 1, color: 'rgba(245, 158, 11, 0)'}
                ])
              }
            },
            {
              name: '点赞数',
              type: 'line',
              data: [1254, 1587, 1423, 1654, 1321, 1489, 1623],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#8B5CF6'
              },
              itemStyle: {
                color: '#8B5CF6'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(139, 92, 246, 0.3)'},
                  {offset: 1, color: 'rgba(139, 92, 246, 0)'}
                ])
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
        
        return myChart;
      }
      
      // 更新文章活跃度趋势图表
      function updateActivityChart(range) {
        let xAxisData, publishData, viewData, commentData, likeData;
        
        // 根据不同的时间范围设置不同的数据
        switch(range) {
          case 'week':
            xAxisData = ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18'];
            publishData = [18, 24, 21, 32, 26, 19, 23];
            viewData = [52643, 68954, 72354, 65421, 58963, 61254, 75632];
            commentData = [456, 521, 489, 567, 498, 523, 487];
            likeData = [1254, 1587, 1423, 1654, 1321, 1489, 1623];
            break;
          case 'month':
            xAxisData = ['8/20', '8/25', '8/30', '9/5', '9/10', '9/15', '9/18'];
            publishData = [65, 78, 82, 75, 86, 92, 35];
            viewData = [356421, 421563, 489652, 523641, 589632, 654782, 256412];
            commentData = [1254, 1423, 1567, 1325, 1654, 1782, 654];
            likeData = [3564, 4215, 4896, 4521, 5236, 5897, 2154];
            break;
          case 'quarter':
            xAxisData = ['7/1', '7/10', '7/20', '8/1', '8/10', '8/20', '9/1', '9/10', '9/18'];
            publishData = [95, 102, 98, 110, 125, 118, 132, 125, 35];
            viewData = [856421, 921563, 989652, 1056421, 1123641, 1189632, 1254782, 1325641, 256412];
            commentData = [2564, 2895, 3125, 3456, 3897, 4215, 4562, 4896, 654];
            likeData = [7564, 8215, 8896, 9521, 10236, 10897, 11564, 12235, 2154];
            break;
          case 'year':
            xAxisData = ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'];
            publishData = [85, 92, 105, 78, 65, 112, 135, 142, 156, 128, 132, 135];
            viewData = [654210, 721560, 856420, 589630, 456210, 987540, 1056420, 1123650, 1254780, 1325640, 1456890, 521478];
            commentData = [1856, 2125, 2564, 1562, 1254, 3256, 3897, 4215, 4896, 3564, 4215, 5642];
            likeData = [5214, 5896, 6542, 4562, 3897, 8564, 9215, 10564, 11235, 9876, 10564, 4215];
            break;
        }
        
        // 更新图表数据
        const myChart = echarts.getInstanceByDom(document.getElementById('articleActivityChart'));
        myChart.setOption({
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              name: '发布文章数',
              data: publishData
            },
            {
              name: '浏览量',
              data: viewData
            },
            {
              name: '评论数',
              data: commentData
            },
            {
              name: '点赞数',
              data: likeData
            }
          ]
        });
      }
      
      // 初始化文章分类图表
      function initArticleCategoryChart() {
        const chartDom = document.getElementById('articleCategoryChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '文章分类分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['技术研究', '学术论文', '会议资讯', '经验分享']
          },
          series: [
            {
              name: '文章分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 18,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 2156, name: '技术研究', itemStyle: { color: '#3B82F6' } },
                { value: 1845, name: '学术论文', itemStyle: { color: '#10B981' } },
                { value: 856, name: '会议资讯', itemStyle: { color: '#F59E0B' } },
                { value: 985, name: '经验分享', itemStyle: { color: '#8B5CF6' } }
              ]
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 初始化文章互动分析图表
      function initArticleInteractionChart() {
        const chartDom = document.getElementById('articleInteractionChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '分类互动率对比',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['技术研究', '学术论文', '会议资讯', '经验分享']
          },
          yAxis: {
            type: 'value',
            name: '互动率(%)',
            max: 100,
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '评论率',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series'
              },
              data: [12.5, 18.2, 22.8, 25.6],
              itemStyle: {
                color: '#3B82F6'
              }
            },
            {
              name: '点赞率',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series'
              },
              data: [32.8, 25.6, 18.5, 38.2],
              itemStyle: {
                color: '#10B981'
              }
            },
            {
              name: '分享率',
              type: 'bar',
              stack: 'total',
              emphasis: {
                focus: 'series'
              },
              data: [8.5, 5.2, 12.6, 15.8],
              itemStyle: {
                color: '#F59E0B'
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 页面加载完成后初始化所有图表
      window.addEventListener('load', function() {
        initActivityChart();
        initArticleCategoryChart();
        initArticleInteractionChart();
      });
      
      // 文章分类变更事件
      form.on('select(articleCategory)', function(data) {
        let categoryText = "全部分类";
        switch(data.value) {
          case 'technology': categoryText = "技术研究"; break;
          case 'academic': categoryText = "学术论文"; break;
          case 'conference': categoryText = "会议资讯"; break;
          case 'experience': categoryText = "经验分享"; break;
        }
        layer.msg(`已切换到${categoryText}分析`, {icon: 0, time: 1000});
        // 这里可以根据选择的分类更新图表
      });
    });
  </script>
</body>
</html>
